<template>
    <div class="repairContainer">
          <div class='wrap'>
              <div class='project-line'>
                <div v-if='selectedProject'>{{selectedProject.name}}</div>
                <div>
                  <i-icon type="unfold" size="20" color="#c9d7db" @click='showProject'/>
                </div>
                <cover-view  class='project-wrap system-wrap' v-if='show2'>
                  <cover-view class='system-line' v-for='(item,index) in projectList' :key='index' @click='selectProject(index)'>
                    {{item.name}}
                  </cover-view>
                </cover-view>
              </div>
              <div class='nav-wrap'>
                <div class='navbar'><mp-navbar :tabs="tabs" :activeIndex='activeIndex' @tabClick="tabClick"></mp-navbar></div>
              </div>
              <div class='date-line'>
                <div @click='sub'>
                  <i-icon type="return" size="20" color="#c9d7db"/>
                  <span>上一{{tabs[activeIndex]}}</span>
                </div>
                <div @click='showDatePicker'>
                  <span class='font-lg'>{{pickerText}}</span>
                  <i-icon type="activity" size="22" color="#83878a" />
                </div>
                <div @click='add'>
                  <span>下一{{tabs[activeIndex]}}</span>
                  <i-icon type="enter" size="20" color="#c9d7db"/>
                </div>
              </div>
              <!-- <div class='order-num'>
                工单数量 :
                <span class='num'>1</span>
              </div> -->
              <div class='echart-wrap'>
                <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleInit" ref="echarts" disableTouch/>
              </div>
              <div class='legend-line'>
                <div class='part'>
                  <div>完成工单数</div><div class='num blue'>{{finishCount}}</div>
                </div>
                <div class='part'>
                  <div>总工单数</div><div class='num'>{{totalCount}}</div>
                </div>
              </div>
          </div>
          <div class='system-wrap'>
            <div class='system-line'><div class='blue'>工单类型</div></div>
            <div class='system-line' v-for='(item,index) in typeList' :key='index'>
              <div>{{item.name}}</div>
              <div class='blue'>{{item.finishCount}}/{{item.totalCount}}</div>
            </div>
          </div>
          <i-toast id="toast" />
          <mpvue-picker ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault" :themeColor="themeColor" @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
          <i-modal  :visible="show" :show-ok='false' :show-cancel='false' i-class='week-calendar'>
            <div class='week-title'>
              <i-icon type="return" size="20" color="#c9d7db" @click='subTime'/>
              <div>{{year}}年{{month+1}}月</div>
              <i-icon type="enter" size="20" color="#c9d7db" @click='addTime'/>
            </div>
            <div class='week-wrap'>
              <radio-group  @change="handleChange">
                <div class='week-line' v-for='(item,index) in dateList' :key='index' @click='changeIndex(index)'>
                  <div class='radio-wrap'>
                    <image src='/static/images/icon_confirm@3x.png' v-if='selectIndex==index'/>
                    <image src='/static/images/icon_unconfirm.png' v-else/>
                    <input type="radio" name="list" :value="index" :checked="selectId==index" class='radio'>
                  </div>
                  <div :class='{active:selectIndex==index}'>第{{index+1}}周 {{item}}</div>
                </div>
              </radio-group>
            </div>
          </i-modal>
    </div>
</template>

<script type="text/javascript">
import { mapState } from 'vuex';
import { $Toast } from '@/../static/iview/base/index';
import mpNavbar from 'mpvue-weui/src/navbar';
import moment from 'moment';
import mpvuePicker from 'mpvue-picker';
import * as echarts from 'echarts/dist/echarts.min';
import mpvueEcharts from 'mpvue-echarts';
let chart = null;
export default {
  data() {
    return {
      tabs:['日','月','年'],
      activeIndex:0,
      echarts,
      option: null,
      timeMode:0,//0日2月3年
      projectId:'',
      mode: 'selector',
      deepLength: 5,
      pickerValueDefault: [],// 初始化值
      pickerValueArray: [], // picker 数组值
      themeColor: '', // 颜色主题
      pickerText:moment(new Date()).format('MM/DD'),
      show:false,
      dateList:[],
      year:moment().year(),
      month:moment().month(),
      selectIndex:'',
      projectList:[],
      show2:false,
      selectedProject:null,
      typeList:[],
      finishCount:0,
      totalCount:0,
      queryTime:moment().format('YYYY-MM-DD')
    }
  },
  computed:{
    ...mapState(['userInfo'])
  },
  mounted() {
     this.findProjectList()
  },
  methods:{
    tabClick(index){
      this.activeIndex = index;
      if(this.tabs[index] == '日'){
        this.timeMode = 0
        this.pickerText = moment().format('MM/DD')
        this.queryTime = moment().format('YYYY-MM-DD')
      }else if(this.tabs[index] == '月'){
        this.timeMode = 2
        this.pickerText = moment().format('YY/MM')
        this.queryTime = moment().format('YYYY-MM-01')
      }else if(this.tabs[index] == '年'){
        this.timeMode = 3
        this.pickerText = moment().format('YYYY')
        this.queryTime = moment().format('YYYY-01-01')
      }
      this.findFaultSystem()
    },
    showProject(){
      this.show2 = true;
    },
    selectProject(index){
      this.selectedProject = this.projectList[index];
      this.projectId = this.selectedProject.id;
      this.show2 = false;
      this.findFaultSystem()
    },
    findProjectList(){
        this.$http.post({
          url:'/project/getBuildings',
          data:{
              ukey:this.userInfo.ukey,
              userId:this.userInfo.userId,
          }
        }).then((res)=>{
            if(res.s==0){
                this.projectList = res.i.Data;
                this.selectedProject = this.projectList[0];
                this.projectId = this.selectedProject.id;
                this.findFaultSystem()
            }
        }).catch((e)=>{
            console.log('请求失败',e)
        })
    },
    findFaultSystem(){
      this.$http.post({
          url:'/statistics/getFinishRate',
          data:{
              ukey:this.userInfo.ukey,
              projectId:this.projectId,
              timeMode:this.timeMode,
              queryTime:this.queryTime
          }
        }).then((res)=>{
            if(res.s==0){
                this.typeList = res.i.Data.typeList;
                this.totalCount = res.i.Data.totalCount;
                this.finishCount = res.i.Data.finishCount;
                this.initChart({
                  totalCount:this.totalCount,
                  finishCount:this.finishCount
                })
            }
        }).catch((e)=>{
            console.log('请求失败',e)
        })
    },
    showDatePicker() {
      this.pickerValueDefault = new Date();
      if(this.tabs[this.activeIndex]=='年'){
        this.mode = 'yearSelector';
        this.themeColor = '#4d92c2';
        this.$refs.mpvuePicker.show();
      }else if(this.tabs[this.activeIndex]=='月'){
        this.mode = 'monthSelector';
        this.themeColor = '#4d92c2';
        this.$refs.mpvuePicker.show();
      }else if(this.tabs[this.activeIndex]=='日'){
        this.mode = 'dateSelector';
        this.themeColor = '#4d92c2';
        this.$refs.mpvuePicker.show();
      }
    },
    onChange(e) {
      //console.log(e);
    },
    onCancel(e) {
      //console.log(e);
    },
    onConfirm(e) {
      if(this.timeMode == 0){
        this.pickerText = moment(new Date(e.label)).format('MM/DD');
        this.queryTime = moment(new Date(e.label)).format('YYYY-MM-DD')
      }else if(this.timeMode == 2){
        this.pickerText = moment(new Date(e.label)).format('YY/MM');
        this.queryTime = moment(new Date(e.label)).format('YYYY-MM-01')
      }else if(this.timeMode == 3){
        this.pickerText = moment(new Date(e.label)).format('YYYY');
        this.queryTime = moment(new Date(e.label)).format('YYYY-01-01')
      }
      this.findFaultSystem()
    },
    initChart ({
      finishCount=0,
      totalCount=0
    }) {
      var datas =  [
          {
            value: finishCount==0?null:finishCount,
            name: '故障设备',
            itemStyle: {
                normal: {
                    color: '#0d85dc'
                }
            }
          },
          {
            value: totalCount==0?100:totalCount-finishCount,
            name: '正常设备',
            itemStyle: {
                normal: {
                    color: '#f4f5f7',
                }
            }
          }
    ];
    var rate = finishCount==0 ? 0+'%' :(finishCount/totalCount*100).toFixed(1)+'%';
    if(totalCount==0) rate = '100%'
      this.option = {
            title: {
              text:rate ,
              subtext: '完成率',
              x: '49%',
              y: '35%',
              textAlign:'center',
              textStyle: {
                  fontSize:30,
                  fontWeight:'normal',
                  color: '#4d92c2',
                  lineHeight:30
              },
              subtextStyle: {
                  color: '#83878a',
                  fontSize: 16,
                  lineHeight:30
              },
        },
        series: [{
          label: {
              normal: {
                  show:false
              }
          },
          labelLine: {
              normal: {
                  show: false
              }
          },
          type: 'pie',
          startAngle: 225,
          center: ['50%', '50%'],
          radius: ['75%', '85%'],
          data:datas
        }]
      }
      this.$refs.echarts.init()
    },
    handleInit (canvas, width, height) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      chart.setOption(this.option)
      return chart
    },
    sub(){
      if(this.timeMode==0){
        var date = moment(new Date(this.queryTime)).subtract(1, 'days');
        this.pickerText = date.format('MM/DD');
        this.queryTime = date.format('YYYY-MM-DD')
      }else if(this.timeMode==2){
        var date = moment(new Date(this.queryTime)).subtract(1, 'months');
        this.pickerText = date.format('YY/MM');
        this.queryTime = date.format('YYYY-MM-01')
      }else if(this.timeMode==3){
        var date = moment(new Date(this.queryTime)).subtract(1, 'years');
        this.pickerText = date.format('YYYY');
        this.queryTime = date.format('YYYY-01-01')
      }
      this.findFaultSystem()
    },
    add(){
      if(this.timeMode==0){
        var date = moment(new Date(this.queryTime)).add(1, 'days');
        this.pickerText = date.format('MM/DD');
        this.queryTime = date.format('YYYY-MM-DD')
      }else if(this.timeMode==2){
        var date = moment(new Date(this.queryTime)).add(1, 'months');
        this.pickerText = date.format('YY/MM');
        this.queryTime = date.format('YYYY-MM-01')
      }else if(this.timeMode==3){
        var date = moment(new Date(this.queryTime)).add(1, 'years');
        this.pickerText = date.format('YYYY');
        this.queryTime = date.format('YYYY-01-01')
      }
      this.findFaultSystem()
    }
  },
  components: {
    mpNavbar,
    mpvueEcharts,
    mpvuePicker
  }
}
</script>

<style lang='less'>
page{
  height:100%;
  background:#eef7fd;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.weui-navbar{
    z-index:1;
    height: 100%;
}
.weui-navbar-slider-on{
    width: 100%!important;
    background-color: #1d7ebf!important;
}
.weui-navbar__item{
    padding: 16rpx 0!important;
    color:#7b7b7b;
    &.weui-bar__item_on{
    color: #1d7ebf!important;
    }
}
.weui-tab{
    border-bottom:none!important;
    background: #fff!important;
}
.repairContainer{
    height: 100%;
    display: flex;
    flex-direction:column;
    color:#83878a;
    .wrap{
      background: #fff;
      .project-line{
        display: flex;
        justify-content: space-between;
        margin:20rpx;
        border-bottom: 2rpx solid #dfe3e5;
        padding: 0 20rpx;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 30rpx;
        position: relative;
        .project-wrap{
          position: absolute;
          width: 100%;
          top:77rpx;
          left:0;
          margin: 0;
        }
      }
      .nav-wrap{
        border-bottom: 2rpx solid #dfe3e5;
        border-top: 2rpx solid #dfe3e5;
        overflow: hidden;
        .navbar{
          width: 50%;
          float: right;
        }
      }
      .date-line{
        height: 90rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 20rpx;
        border-bottom: 2rpx solid #dfe3e5;
        font-size: 30rpx;
        .font-lg{
          font-size:36rpx;
          margin-right:10rpx; 
        }
      }
      .order-num{
        height: 100rpx;
        line-height: 100rpx;
        display: flex;
        justify-content: center;
        .num{
          color:#4d92c2;
          font-size: 58rpx;
          margin-left: 10rpx;
        }
      }
      .echart-wrap{
        height: 356rpx;
      }
      .legend-line{
        height: 100rpx;
        line-height: 100rpx;
        display: flex;
        justify-content: space-between;
        margin: 0 50rpx;
        .part{
          display: flex;
          align-items: center
        }
        .num{
          font-size:50rpx;
          margin-left:20rpx; 
          &.blue{
            color:#4d92c2;
          }
        }
      }
    }
    .system-wrap{
      background: #fff;
      border-radius: 8rpx;
      margin: 30rpx;
      border: 2rpx solid #dfe3e5;
      font-size: 30rpx;
      .system-line{
        display: flex;
        justify-content: space-between;
        border-bottom: 2rpx solid #dfe3e5;
        color:#83878a;
        padding:10rpx 20rpx;
        &:last-child{
          border-bottom: none;
        }
        .blue{
          color:#4d92c2;
        }
      }
    }
    .week-calendar{
      &{
        view{
         padding-top:0;
         max-height: 100%;
         margin-bottom: 0;
        }
      }
      .week-title{
        background: #1d7ebf;
        color: #fff;
        height: 60rpx;
        line-height: 60rpx;
        display: flex;
        justify-content: space-between;
      }
      .week-wrap{
        .week-line{
          height: 70rpx;
          line-height: 70rpx;
          display: flex;
          justify-content: center;
          .active{
            color: #1d7ebf
          }
          .radio-wrap{
            width: 60rpx;
            height: 60rpx;
            position: relative;
            image{
              position: absolute;
              left: 12rpx;
              top: 16rpx;
              width: 36rpx;
              height: 36rpx;
              z-index: 1;
            }
            .radio{
              position:absolute;
              left: 0;
              top: 0;
              z-index: 2;
              opacity: 0;
            }
          }
        }
      }
    }
} 
</style>
